<template>
  <div class="myPurchaseBody wap">
    <div class="MPHead">
      <x-header
        :left-options="{ backText: '', preventGoBack: true }"
        @on-click-back="goHomePage"
      >
        <span>我的订单</span>
        <a
          v-if="!$fromApp(this)"
          class="editBtn"
          slot="right"
          @click="logout()"
          href="javascript:void(0);"
          >注销</a
        >
      </x-header>
      <div class="statusList display-flex flex-direction-row">
        <div
          @click="selectTabFn(0)"
          style="width: 21%"
          :style="{
            borderBottomColor: selectTab == 0 ? '#527DD9' : '#FFFFFF',
            fontWeight: selectTab == 0 ? 'bold' : 'normal',
          }"
          class="statusListItem ml display-flex flex-direction-row align-items-center justify-content-flex-center"
        >
          <div
            class="tabName display-flex flex-direction-column align-items-center justify-content-flex-center"
          >
            所有订单
          </div>
        </div>
        <div
          @click="selectTabFn(5)"
          style="width: 21%"
          :style="{
            borderBottomColor: selectTab == 5 ? '#527DD9' : '#FFFFFF',
            fontWeight: selectTab == 5 ? 'bold' : 'normal',
          }"
          class="statusListItem mr display-flex flex-direction-row align-items-center justify-content-flex-center"
        >
          <div
            class="tabName display-flex flex-direction-column align-items-center justify-content-flex-center"
          >
            待确认
            <p
              class="display-flex flex-direction-row align-items-center justify-content-flex-center"
              v-show="waitAuth > 0"
            >
              <span>{{ waitAuth }}</span>
            </p>
          </div>
        </div>
        <div
          @click="selectTabFn(1)"
          style="width: 21%"
          :style="{
            borderBottomColor: selectTab == 1 ? '#527DD9' : '#FFFFFF',
            fontWeight: selectTab == 1 ? 'bold' : 'normal',
          }"
          class="statusListItem mr display-flex flex-direction-row align-items-center justify-content-flex-center"
        >
          <div
            class="tabName display-flex flex-direction-column align-items-center justify-content-flex-center"
          >
            待付款
            <p
              class="display-flex flex-direction-row align-items-center justify-content-flex-center"
              v-show="waitPay > 0"
            >
              <span>{{ waitPay }}</span>
            </p>
          </div>
        </div>
        <div
          @click="selectTabFn(2)"
          style="width: 21%"
          :style="{
            borderBottomColor: selectTab == 2 ? '#527DD9' : '#FFFFFF',
            fontWeight: selectTab == 2 ? 'bold' : 'normal',
          }"
          class="statusListItem mr display-flex flex-direction-row align-items-center justify-content-flex-center"
        >
          <div
            class="tabName display-flex flex-direction-column align-items-center justify-content-flex-center"
          >
            待配送
            <p
              class="display-flex flex-direction-row align-items-center justify-content-flex-center"
              v-show="waitDeliver > 0"
            >
              <span>{{ waitDeliver }}</span>
            </p>
          </div>
        </div>
        <div
          @click="selectTabFn(3)"
          style="width: 21%"
          :style="{
            borderBottomColor: selectTab == 3 ? '#527DD9' : '#FFFFFF',
            fontWeight: selectTab == 3 ? 'bold' : 'normal',
          }"
          class="statusListItem mr display-flex flex-direction-row align-items-center justify-content-flex-center"
        >
          <div
            class="tabName display-flex flex-direction-column align-items-center justify-content-flex-center"
          >
            交易完成
          </div>
        </div>
        <div
          @click="selectTabFn(4)"
          style="width: 16%"
          :style="{
            borderBottomColor: selectTab == 4 ? '#527DD9' : '#FFFFFF',
            fontWeight: selectTab == 4 ? 'bold' : 'normal',
          }"
          class="statusListItem mr display-flex flex-direction-row align-items-center justify-content-flex-center"
        >
          <div
            class="tabName display-flex flex-direction-column align-items-center justify-content-flex-center"
          >
            已取消
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <scroller
        class="MPContent"
        ref="my_purchase_scroller"
        :on-refresh="refresh"
        :on-infinite="infinite"
        :noDataText="this.$noData(dataArr)"
      >
        <div
          v-for="(item, index) in dataArr"
          :key="index"
          style="margin-top: 10px"
          class="orderBox display-flex flex-direction-column"
        >
          <div class="orderTitle display-flex flex-direction-row">
            <div
              class="shopLogo display-flex flex-direction-row align-items-center justify-content-flex-center"
            >
              <img
                @click="goShop(item)"
                v-lazy="yasuo(item.sellerDistributorVO.logo)"
                alt
              />
            </div>
            <div
              class="shopName display-flex flex-direction-column justify-content-flex-center"
            >
              <div
                style="font-size: 14px; font-weight: bold; color: #333333"
                class="display-flex flex-direction-row justify-content-flex-justify"
              >
                <p class="shopNameText" @click="goShop(item)">
                  {{ item.sellerName }}
                </p>
                <p>
                  {{
                    item.completeState == 0
                      ? "已取消"
                      : item.completeState == 2
                      ? "已完成"
                      : item.payState == 0
                      ? "未支付"
                      : "已支付"
                  }}
                </p>
              </div>
              <div
                style="font-size: 12px"
                class="display-flex flex-direction-row justify-content-flex-justify"
              >
                <span style="color: #666666">{{ item.creTime }}</span>
                <div class="display-flex flex-direction-row">
                  <span
                    v-if="item.completeState == 0"
                    :style="{
                      color: item.payState == 0 ? '#FAB945' : '#4DC0A1',
                    }"
                    >[{{ item.payState == 0 ? "未支付" : "已支付" }}]</span
                  >
                  <span
                    :style="{
                      color: item.deliverState == 0 ? '#FAB945' : '#4DC0A1',
                    }"
                    >[{{ item.deliverState == 0 ? "未配送" : "已配送" }}]</span
                  >
                </div>
              </div>
            </div>
          </div>

          <div class="orderContent display-flex flex-direction-column">
            <div
              v-for="(j, index) in (item.saleOrderDetailVOList || '').slice(
                0,
                3
              )"
              :key="index"
              class="orderItemList display-flex flex-direction-column"
            >
              <div
                class="orderItem display-flex flex-direction-row justify-content-flex-justify"
              >
                <img
                  @click="goOrderDetail(j.saleOrderId)"
                  v-lazy="yasuo(j.goodsPic)"
                  alt
                />
                <div class="orderDetail display-flex flex-direction-column">
                  <p
                    class="display-flex flex-direction-row align-items-center"
                    @click="goOrderDetail(j.saleOrderId)"
                    style="color: #333333; font-size: 13px"
                  >
                    <span>[{{ j.brandName }}]{{ j.goodsName }}</span>
                  </p>
                  <p class="goodsDetail">
                    <span>{{ j.goodsSpec }}</span>
                  </p>
                  <div
                    class="display-flex flex-direction-row justify-content-flex-justify align-items-center"
                  >
                    <p
                      v-if="j.taxPrice && j.taxPrice != 0"
                      class="display-flex flex-direction-row align-items-center justify-content-flex-center"
                    >
                      <span style="color: #fc6e51; font-size: 11px">￥</span>
                      <span style="color: #fc6e51; font-size: 18px">{{
                        j.taxPrice
                      }}</span>
                      <span style="color: #666666; font-size: 12px"
                        >/{{ j.unitName }}</span
                      >
                    </p>
                    <p v-else>
                      <span
                        v-if="j.enquiry == 0"
                        style="color: #fc6e51; font-size: 11px"
                        >赠品</span
                      >
                      <span v-else style="color: #fc6e51">
                        询价
                        <span style="color: #666666; font-size: 12px"
                          >/{{ j.unitName }}</span
                        >
                      </span>
                    </p>
                    <p>×{{ j.num }}</p>
                  </div>
                </div>
              </div>
            </div>
            <div
              v-if="item.loadMore"
              v-for="(j, index) in (item.saleOrderDetailVOList || '').slice(3)"
              :key="'more' + index"
              class="orderItemList display-flex flex-direction-column"
            >
              <div
                class="orderItem display-flex flex-direction-row justify-content-flex-justify"
              >
                <img
                  @click="goOrderDetail(j.saleOrderId)"
                  :src="j.goodsPic"
                  alt
                />
                <div class="orderDetail display-flex flex-direction-column">
                  <p
                    class="display-flex flex-direction-row align-items-center"
                    @click="goOrderDetail(j.saleOrderId)"
                    style="color: #333333; font-size: 13px"
                  >
                    <span>[{{ j.brandName }}]{{ j.goodsName }}</span>
                  </p>
                  <p class="goodsDetail">
                    <span>{{ j.goodsSpec }}</span>
                  </p>
                  <div
                    class="display-flex flex-direction-row justify-content-flex-justify align-items-center"
                  >
                    <p
                      v-if="j.taxPrice && j.taxPrice != 0"
                      class="display-flex flex-direction-row align-items-center justify-content-flex-center"
                    >
                      <span style="color: #fc6e51; font-size: 11px">￥</span>
                      <span style="color: #fc6e51; font-size: 18px">{{
                        j.taxPrice
                      }}</span>
                      <span style="color: #666666; font-size: 12px"
                        >/{{ j.unitName }}</span
                      >
                    </p>
                    <p v-else>
                      <span
                        v-if="j.enquiry == 0"
                        style="color: #fc6e51; font-size: 11px"
                        >赠品</span
                      >
                      <span v-else style="color: #fc6e51">
                        询价
                        <span style="color: #666666; font-size: 12px"
                          >/{{ j.unitName }}</span
                        >
                      </span>
                    </p>
                    <p>×{{ j.num }}</p>
                  </div>
                </div>
              </div>
            </div>
            <div
              v-if="item.saleOrderDetailVOList.length > 3"
              class="loadMore display-flex flex-direction-row justify-content-flex-center align-items-center"
            >
              <p
                v-if="!item.loadMore"
                class="display-flex flex-direction-row justify-content-flex-center align-items-center"
                @click="loadMoreFn(index)"
              >
                <span style="color: #666666"
                  >共有{{ item.saleOrderDetailVOList.length }}条信息</span
                >
                <img
                  src="../../../assets/img/cart/down.png"
                  alt
                  style="width: 0.2rem; height: 0.25rem; margin-left: 0.1rem"
                />
              </p>
              <p
                v-else
                class="display-flex flex-direction-row justify-content-flex-center align-items-center"
                @click="loadMoreFn(index)"
              >
                <span style="color: #666666">收&nbsp;&nbsp;起</span>
              </p>
            </div>
            <div
              class="orderPrice display-flex flex-direction-column align-items-flex-end"
            >
              <div
                class="payNum display-flex flex-direction-row align-items-center justify-content-flex-center"
              >
                <span>{{ item.payState == 1 ? "实付款：" : "待付款：" }}</span>
                <p style="color: #fb6e52; font-weight: bold">
                  ￥ {{ item.realAmount }}
                </p>
              </div>
              <div class="payWay">
                <span v-if="item.payWay == 1"
                  >付款方式：{{ item.payWayDesc }}</span
                >
                <span
                  v-if="
                    item.creditSaleDay &&
                    item.creditSaleDay > 0 &&
                    item.payWay == 2
                  "
                  >付款方式：赊销{{ item.creditSaleDay }}天</span
                >
                <span v-if="item.payState == 1" style="margin-left: 0.3rem"
                  >付款日期：{{ item.payTime }}</span
                >
              </div>
              <p
                v-if="item.authState == 0"
                style="color: #666666; font-size: 16px; font-weight: bold"
              >
                卖家待确认
              </p>
              <div style="display: flex; flex-direction: row">
                <div
                  v-if="item.payFlag == 1"
                  style="margin-right: 10px"
                  class="cancelBtn display-flex flex-direction-row justify-content-flex-center align-items-center"
                  @click="gotoPay(item.id)"
                >
                  <span>去支付</span>
                </div>
                <div
                  v-if="item.completeState == 1 && item.deliverState == 0"
                  class="cancelBtn display-flex flex-direction-row justify-content-flex-center align-items-center"
                  @click="showCancelConfirmFn(item.id)"
                >
                  <span>取消订单</span>
                </div>
                <div
                  v-if="item.completeState != 1"
                  style="margin-right: 10px"
                  class="cancelBtn display-flex flex-direction-row justify-content-flex-center align-items-center"
                  @click="oneMoreFn(item.id)"
                >
                  <span>再来一单</span>
                </div>

                <div
                  v-if="item.completeState == 0"
                  class="cancelBtn display-flex flex-direction-row justify-content-flex-center align-items-center"
                  @click="showDeleteConfirmFn(item.id)"
                >
                  <span>删除订单</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          v-if="!loading && dataArr == ''"
          style="width: 100%"
          class="display-flex flex-direction-row justify-content-flex-center align-items-center"
        >
          <p style="color: #666666">暂无数据~</p>
        </div>
      </scroller>
    </div>
    <div v-transfer-dom>
      <confirm v-model="showCancelConfirm" @on-confirm="cancelFn">
        <p style="text-align: center; font-size: 18px">确定取消订单？</p>
      </confirm>
    </div>
    <div v-transfer-dom>
      <confirm v-model="showDeleteConfirm" @on-confirm="deleteFn">
        <p style="text-align: center; font-size: 18px">确定删除订单？</p>
      </confirm>
    </div>
    <div v-transfer-dom>
      <confirm v-model="showOneMoreConfirm" @on-confirm="oneMoreFn">
        <p style="text-align: center; font-size: 18px">确定再来一单？</p>
      </confirm>
    </div>
  </div>
</template>

<script>
import { Storage } from "@/service/storage";
export default {
  name: "myPurchase",
  data() {
    return {
      selectTab: 0,
      dataArr: [],
      waitPay: 0,
      waitAuth: 0,
      waitDeliver: 0,
      shopId: "",
      shopName: "",
      shopPhone: "",
      cancelOrderId: "",
      deleteOrderId: "",
      oneMoreOrderId: "",
      showCancelConfirm: false,
      showDeleteConfirm: false,
      showOneMoreConfirm: false,
      pageNo: 0,
      isScroll: true,
      noData: false,
      loading: true,
    };
  },
  beforeRouteLeave(to, from, next) {
    //记录离开时的位置
    let currentPosition =
      this.$refs.my_purchase_scroller &&
      this.$refs.my_purchase_scroller.getPosition() &&
      this.$refs.my_purchase_scroller.getPosition().top;

    if (this.selectTab == 0) {
      sessionStorage.purchase0ContentP = currentPosition ? currentPosition : 0;
    } else if (this.selectTab == 1) {
      sessionStorage.purchase1ContentP = currentPosition ? currentPosition : 0;
    } else if (this.selectTab == 2) {
      sessionStorage.purchase2ContentP = currentPosition ? currentPosition : 0;
    } else if (this.selectTab == 3) {
      sessionStorage.purchase3ContentP = currentPosition ? currentPosition : 0;
    } else if (this.selectTab == 4) {
      sessionStorage.purchase4ContentP = currentPosition ? currentPosition : 0;
    } else {
      sessionStorage.purchase5ContentP = currentPosition ? currentPosition : 0;
    }
    next();
  },
  mounted() {
    document
      .getElementsByClassName("myPurchaseBody")[0]
      .addEventListener("touchmove", this.touchMoveScroll, false);
    this.shopId = this.$route.query.id;
    this.shopName = decodeURIComponent(this.$route.query.name)
      .toString()
      .replace(/~~pct~~/g, "%");
    this.shopPhone = this.$route.query.phone;
    this.getOrderStateNum();

    if (sessionStorage.purchaseNum) {
      this.selectTabFn(parseInt(sessionStorage.purchaseNum));
    } else {
      sessionStorage.purchaseNum = 0;
    }
    this.$callJava({ onBackPressed: true });
    this.oldOnBackPressed = window["onBackPressed"];
    window["onBackPressed"] = this.goHomePage.bind(this);
  },
  destroyed() {
    window["onBackPressed"] = this.oldOnBackPressed;
    this.$callJava({ onBackPressed: false });
    if (document.getElementsByClassName("myPurchaseBody")[0]) {
      document
        .getElementsByClassName("myPurchaseBody")[0]
        .removeEventListener("touchmove", this.touchMoveScroll, false);
    }
  },
  methods: {
    goHomePage() {
      // this.$callJava({ code: 1007 });
      // this.$router.go(-1)
      this.$router.replace({
        path: "/purchase/storePage",
        query: {
          id: this.$route.query.id
            ? this.$route.query.id
            : this.$route.query.sellerId,
          from: this.$fromApp(this) ? "app" : "",
        },
      });
    },
    yasuo(img) {
      return img.indexOf("?") == -1 ? img + "?yasuo" : img;
    },
    currentPosition() {
      let currentPosition =
        this.$refs.my_purchase_scroller &&
        this.$refs.my_purchase_scroller.getPosition() &&
        this.$refs.my_purchase_scroller.getPosition().top;

      if (this.selectTab == 0) {
        sessionStorage.purchase0ContentP = currentPosition
          ? currentPosition
          : 0;
      } else if (this.selectTab == 1) {
        sessionStorage.purchase1ContentP = currentPosition
          ? currentPosition
          : 0;
      } else if (this.selectTab == 2) {
        sessionStorage.purchase2ContentP = currentPosition
          ? currentPosition
          : 0;
      } else if (this.selectTab == 3) {
        sessionStorage.purchase3ContentP = currentPosition
          ? currentPosition
          : 0;
      } else if (this.selectTab == 4) {
        sessionStorage.purchase4ContentP = currentPosition
          ? currentPosition
          : 0;
      } else {
        sessionStorage.purchase5ContentP = currentPosition
          ? currentPosition
          : 0;
      }
    },
    getScroll() {
      // console.log(sessionStorage.purchase5ContentP,this.selectTab)
      let position = 0;
      if (this.selectTab == 0 && sessionStorage.purchase0ContentP) {
        position = sessionStorage.purchase0ContentP;
      } else if (this.selectTab == 1 && sessionStorage.purchase1ContentP) {
        position = sessionStorage.purchase1ContentP;
      } else if (this.selectTab == 2 && sessionStorage.purchase2ContentP) {
        position = sessionStorage.purchase2ContentP;
      } else if (this.selectTab == 3 && sessionStorage.purchase3ContentP) {
        position = sessionStorage.purchase3ContentP;
      } else if (this.selectTab == 4 && sessionStorage.purchase4ContentP) {
        position = sessionStorage.purchase4ContentP;
      } else if (this.selectTab == 5 && sessionStorage.purchase5ContentP) {
        position = sessionStorage.purchase5ContentP;
      }
      setTimeout(() => {
        this.$refs.my_purchase_scroller.scrollTo(0, position, false);
      }, 500);
    },
    loadMoreFn(i) {
      this.dataArr[i].loadMore = !this.dataArr[i].loadMore;
      this.$set(this.dataArr, i, this.dataArr[i]);
    },
    touchMoveScroll() {
      // console.log("move")
      this.isScroll = false;
      setTimeout(() => {
        this.isScroll = true;
      }, 3000);
    },
    selectTabFn(val) {
      let currentPosition =
        this.$refs.my_purchase_scroller &&
        this.$refs.my_purchase_scroller.getPosition() &&
        this.$refs.my_purchase_scroller.getPosition().top;

      if (this.selectTab == 0) {
        if (currentPosition != 0) {
          sessionStorage.purchase0ContentP = currentPosition
            ? currentPosition
            : 0;
        }
      } else if (this.selectTab == 1) {
        sessionStorage.purchase1ContentP = currentPosition
          ? currentPosition
          : 0;
      } else if (this.selectTab == 2) {
        sessionStorage.purchase2ContentP = currentPosition
          ? currentPosition
          : 0;
      } else if (this.selectTab == 3) {
        sessionStorage.purchase3ContentP = currentPosition
          ? currentPosition
          : 0;
      } else if (this.selectTab == 4) {
        sessionStorage.purchase4ContentP = currentPosition
          ? currentPosition
          : 0;
      } else {
        sessionStorage.purchase5ContentP = currentPosition
          ? currentPosition
          : 0;
      }

      this.isScroll = true;
      this.loading = true;
      this.pageNo = 0;
      this.noData = false;
      sessionStorage.purchaseNum = this.selectTab = val;
      this.$refs.my_purchase_scroller.finishInfinite(false);
      this.dataArr = [];
      this.initData(val, 1);
    },
    initData(type, pageNo, done) {
      this.$ajax.get(
        "replenish/order/list",
        (res) => {
          for (let i = 0; i < res.data.length; i++) {
            res.data[i].loadMore = false;
          }
          if (pageNo === 1) {
            this.dataArr = res.data;
          } else {
            this.dataArr = this.dataArr.concat(res.data);
          }

          if (this.isScroll) {
            this.getScroll();
          }
          if (typeof done == "function") {
            done();
          }

          if (this.$refs.my_purchase_scroller) {
            this.$refs.my_purchase_scroller.finishPullToRefresh();
          }

          if (!res.data || res.data.length < 10) {
            //每次请求数据是10条，如果数据不够10条，就是没数据了 让页数=0；
            this.noData = true;
            if (this.$refs.my_purchase_scroller) {
              this.$refs.my_purchase_scroller.finishInfinite(true);
            }
          }
          // console.log(res.data)
          // this.$refs.my_purchase_scroller.finishPullToRefresh();
          //
          // if (res.data) {
          //   this.dataArr = this.pageNo == 1 ? res.data : this.dataArr.concat(res.data);
          //   this.pageNo++;
          //   if(this.isScroll){
          //     console.log("scroll")
          //     this.getScroll();
          //   }
          // }
          //
          // if (!res.data || res.data.length < 4) {
          //   console.log('mieyouxiayiye ')
          //   this.noData = true;
          //   if (this.$refs.my_purchase_scroller) {
          //     this.$refs.my_purchase_scroller.finishInfinite(true);
          //   }
          // }

          // this.dataArr = res.data;
          // this.getScroll();
        },
        {
          sellerId: this.shopId,
          orderStateType: type,
          pageNo: pageNo,
          pageSize: 10,
        }
      );
    },
    gotoPay(id) {
      if (this.$fromApp(this)) {
        this.$callJava({ code: 1018, id: id });
      } else {
        this.$ajax.post(
          "payment/submit",
          {
            channel: "AllinPay",
            fromType: "GoodsOrder",
            allinPayMethod: "W02",
            fromId: id,
          },
          (res) => {
            // console.log(res)
            if (res.code == 200) {
              console.log(res.data);
              window.location.href = res.data;
              // this.$router.push(res.data);
              // this.$router.push({ path:'/cart/pay/success'});
            } else {
              this.$vux.toast.text(res.msg, "middle");
            }
          }
        );
      }
    },
    showCancelConfirmFn(id) {
      this.cancelOrderId = id;
      this.showCancelConfirm = true;
    },
    showDeleteConfirmFn(id) {
      this.deleteOrderId = id;
      this.showDeleteConfirm = true;
    },
    showOneMoreFn(id) {
      this.oneMoreOrderId = id;
      this.showOneMoreConfirm = true;
    },
    logout() {
      Storage.remove("token");
      this.$router.replace({
        path: "/login",
        query: { sellerId: this.$route.query.id },
      });
    },
    oneMoreFn(id) {
      this.$ajax.post(
        "replenish/shopping_cart/setting/again",
        { saleOrderId: id },
        (res) => {
          // console.log(res)
          if (res.code == 200) {
            this.$vux.toast.text(res.data.message, "middle");
            if (res.data.num > 0) {
              setTimeout(() => {
                this.$root.eventHub.$emit("oneMoreOrder");
                if (this.$fromApp(this)) {
                  // this.$callJava({url:this.$webUrl+"cart/confirm?from=app&ids="+ids.join(',')+"&sellerId="+this.sellerId})
                  this.$router.push({
                    path: "/cart",
                    query: { id: this.shopId, from: "app" },
                  });
                } else {
                  this.$router.push({
                    path: "/cart",
                    query: { id: this.shopId },
                  });
                }
              }, 500);
            }
          } else {
            this.$vux.toast.text(res.msg, "middle");
          }
        }
      );
    },
    cancelFn() {
      this.currentPosition();
      this.$ajax.get(
        "replenish/order/cancel",
        (res) => {
          if (res.code == "200") {
            this.getOrderStateNum();
            this.initData(this.selectTab, 1);
          } else {
            this.$vux.toast.text(res.msg, "center");
          }
        },
        { saleOrderId: this.cancelOrderId }
      );
    },
    deleteFn() {
      this.currentPosition();
      this.$ajax.get(
        "replenish/order/delete",
        (res) => {
          if (res.code == "200") {
            this.getOrderStateNum();
            this.initData(this.selectTab, 1);
          } else {
            this.$vux.toast.text(res.msg, "center");
          }
        },
        { saleOrderId: this.deleteOrderId }
      );
    },
    goShop(val) {
      if (this.$fromApp(this)) {
        this.$router.push({
          path: "/purchase/storePage",
          query: {
            id: val.sellerDistributorVO.id,
            name: encodeURIComponent(
              val.sellerDistributorVO.name.toString().replace(/%/g, "~~pct~~")
            ),
            phone: val.sellerDistributorVO.phone,
            from: "app",
          },
        });
      } else {
        this.$router.push({
          path: "/purchase/storePage",
          query: {
            id: val.sellerDistributorVO.id,
            name: encodeURIComponent(
              val.sellerDistributorVO.name.toString().replace(/%/g, "~~pct~~")
            ),
            phone: val.sellerDistributorVO.phone,
          },
        });
      }
    },
    goOrderDetail(id) {
      if (this.$fromApp(this)) {
        this.$router.push({
          path: "/purchase/orderDetails",
          query: { id: id, from: "app" },
        });
      } else {
        this.$router.push({
          path: "/purchase/orderDetails",
          query: { id: id },
        });
      }
    },
    getOrderStateNum() {
      this.$ajax.get(
        "replenish/order/stat_order_num",
        (res) => {
          this.waitPay = res.data.waitPay;
          this.waitAuth = res.data.waitAuth;
          this.waitDeliver = res.data.waitDeliver;
        },
        { sellerId: this.shopId }
      );
    },
    refresh() {
      if (this.selectTab == 0) {
        sessionStorage.purchase0ContentP = 0;
      } else if (this.selectTab == 1) {
        sessionStorage.purchase1ContentP = 0;
      } else if (this.selectTab == 2) {
        sessionStorage.purchase2ContentP = 0;
      } else if (this.selectTab == 3) {
        sessionStorage.purchase3ContentP = 0;
      } else if (this.selectTab == 4) {
        sessionStorage.purchase4ContentP = 0;
      } else {
        sessionStorage.purchase5ContentP = 0;
      }
      this.noData = false;
      this.pageNo = 0;

      this.isScroll = true;
      this.loading = true;
      this.pageNo = 0;
      this.noData = false;
      this.dataArr = [];
      this.initData(this.selectTab, 1);
    },
    infinite(done) {
      //
      // console.log("infinite",this.pageNo)
      // setTimeout(() => {
      //   if (!this.noData&&this.pageNo!=1) {
      //     this.initData(this.selectTab);
      //     done(true)
      //   } else {
      //     this.$refs.my_purchase_scroller&&this.$refs.my_purchase_scroller.finishInfinite(false)
      //     done(true)
      //   }
      // }, 50)

      setTimeout(() => {
        if (!this.noData) {
          this.pageNo++;
          this.initData(this.selectTab, this.pageNo, done);
          this.$refs.my_purchase_scroller &&
            this.$refs.my_purchase_scroller.finishInfinite(true);
        } else {
          this.$refs.my_purchase_scroller.finishInfinite(true);
        }
      }, 50);
    },
  },
};
</script>

<style lang="less" type="text/less" scoped>
.myPurchaseBody {
  .editBtn {
    color: #ffffff;
  }
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 1rem;

  .MPHead {
    background-color: #ffffff;

    .statusList {
      height: 1.01rem;
      margin: 0 0.1rem;

      .statusListItem {
        border-bottom: 2px #ffffff solid;

        .tabName {
          font-size: 13px;
          position: relative;
          height: 1rem;

          p {
            position: absolute;
            top: 0.1rem;
            right: -0.28rem;
            font-weight: normal !important;
            font-size: 10px;
            color: #ff3c4a;
            width: 0.3rem;
            height: 0.3rem;
            text-align: center;
            line-height: 0.3rem;
            border-radius: 0.15rem;
            border: 1px solid #ff3c4a;
            background-color: #ffffff;
          }
        }
      }

      .mr {
        width: 18%;
        margin: 0 1%;
      }

      .ml {
        width: 16%;
        margin: 0 2%;
      }
    }
  }

  .MPContent {
    .orderBox {
      border-radius: 10px;
      margin: 0rem 0.3rem 0.3rem;
      background-color: #ffffff;

      .orderTitle {
        height: 1.37rem;
        border-bottom: 1px solid #ebebeb;

        .shopLogo {
          width: 1.26rem;
          height: 1.37rem;

          img {
            width: 0.78rem;
            height: 0.78rem;
          }
        }

        .shopName {
          width: 5.3rem;
          height: 1.37rem;

          .shopNameText {
            width: 4rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }

      .orderContent {
        margin: 0rem 0.24rem 0.2rem;

        .orderItemList {
          border-bottom: 1px solid #ebebeb;

          .orderItem {
            margin: 0.2rem 0;

            img {
              width: 1.4rem;
              height: 1.4rem;
            }

            .orderDetail {
              width: 4.7rem;

              .goodsDetail {
                span {
                  color: #999999;
                  height: 0.32rem;
                  background-color: #eeeeee;
                  border-radius: 0.16rem;
                  padding: 0 0.15rem;
                  margin-top: 0.05rem;
                  font-size: 10px;
                }
              }
            }
          }
        }

        .loadMore {
          p {
            margin: 0.3rem 0;
            border: 1px solid #eeeeee;
            height: 0.6rem;
            border-radius: 0.3rem;
            padding: 0 0.3rem;
          }
        }

        .orderPrice {
          .payNum {
            height: 0.6rem;
            line-height: 0.6rem;
            font-size: 13px;
          }

          .payWay {
            color: #999999;
            font-size: 13px;
          }

          .cancelBtn {
            height: 0.56rem;
            line-height: 0.56rem;
            border: 1px solid #c9c9c9;
            border-radius: 0.28rem;
            padding: 0 0.4rem;
            margin-top: 0.2rem;
            font-size: 14px;
            color: #333333;
          }
        }
      }
    }
  }
}
</style>
